// packageInsurance/pages/insurance-risk/insurance-risk.js
import * as echarts from '../../components/ec-canvas/echarts';
import {
    getInsuranceRisk
} from '../../api/insurance'
import user from '../../../utils/user'
Page({
    data: {
        isTipInsurance:false,
        tipTop:0,
        tipLeft:110,
        isTipInsuranceSum:false,
        tipTopSum:0,
        tipLeftSum:0,
        riskInfo: {},
        claimRate: '',
        ec: {
            lazyLoad: true
        },
        xlist: [],
        ylist: [],
        ylist2: [],
        list: ['全款', '待收货', '待发货', '已收货'],
        activeIndex: 0,
        option: {
            series: [{
                    type: 'gauge',
                    radius: '95%',
                    center: ['50%', '80%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 20,
                    padding:0,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#FF7E68' // 0% 处的颜色
                            }, {
                                offset: 0.25,
                                color: '#FF9444' // 100% 处的颜色
                            }, {
                                offset: 0.5,
                                color: '#FFC53D' // 100% 处的颜色
                            }, {
                                offset: 0.75,
                                color: '#B0ED00' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: '#00D679' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    yAxis:{
                        padding:0
                    },
                    xAxis:{
                        padding:0
                    },
                    progress: {
                        show: true,
                        width: 50
                    },
                    pointer: {
                        // icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                        show: false,
                        length: '100',
                        offsetCenter: [0, 0],
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 25,
                            color: [
                                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0.3,
                                        color: "rgba(255, 129, 114, 0.1)"
                                    },
                                    {
                                        offset: 0.7,
                                        color: "rgba(255, 197, 61, 0.1)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(115, 222, 179, 0.1)"
                                    }
                                ])]
                            ]
                        }
                    },
                    axisTick: {
                        distance: -40,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            height: 2,
                            color: '#FFF3E1'
                        }
                    },
                    splitLine: {
                        distance: -45,
                        length: 14,
                        show: false,
                        lineStyle: {
                            width: 3,
                            height: 2,
                            color: '#FFF3E1'
                        }
                    },
                    axisLabel: {
                        distance: -15,
                        color: '#999',
                        fontSize: 20,
                        show: true,
                        padding: [0,0,0,0],
                        formatter: function (value) {
                            if (value === 0) {
                                return ['{a|极差}'].join('\n')
                            } else if (value === 20) {
                                return ['{b|较差}'].join('\n')
                            } else if (value === 50) {
                                return ['{c|}', '{c|}', '{c|}', '{c|一般}'].join('\n')
                            } else if (value === 80) {
                                return ['{d|不错}'].join('\n')
                            } else if (value === 100) {
                                return ['{e|优秀}'].join('\n')
                            }
                        },
                        rich: {
                            a: {
                                fontWeight: 600,
                                fontSize: 14,
                                color: '#FF7E68',
                                align: 'left',
                                margin: 100
                            },
                            b: {
                                fontWeight: 600,
                                fontSize: 14,
                                color: '#FF9444',
                                align: 'center'
                            },
                            c: {
                                fontWeight: 600,
                                fontSize: 14,
                                color: '#FFC53D',
                                align: 'center',
                                lineHeight: '6'
                            },
                            d: {
                                fontWeight: 600,
                                fontSize: 14,
                                color: '#B0ED00',
                                align: 'center'
                            },
                            e: {
                                fontWeight: 600,
                                fontSize: 14,
                                color: '#00D679',
                                align: 'center',
                                margin: 100
                            }
                        },
                    },

                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '0',
                        height: '0',
                        borderRadius: 8,
                        offsetCenter: [0, '-40%'],
                        fontWeight: 'bolder',
                        formatter: function (value) {
                            if (value <= 0) {
                                return ['{a|极差}', '{b|综合评价}'].join('\n')
                            } else if (value > 0 && value <= 25) {
                                return ['{a|较差}', '{b|综合评价}'].join('\n')
                            } else if (value > 25 && value <= 50) {
                                return ['{a|一般}', '{b|综合评价}'].join('\n')
                            } else if (value > 50 && value <= 75) {
                                return ['{a|不错}', '{b|综合评价}'].join('\n')
                            } else if (value > 75 && value <= 100) {
                                return ['{a|优秀}', '{b|综合评价}'].join('\n')
                            }
                        },
                        rich: {
                            a: {
                                fontSize: 20,
                                fontWeight: 'bold',
                                fontFamily: 'Arial',
                                lineHeight: 20,
                                margin: [250, 0, 0, 0],
                                color: '#202536',
                                align: 'center'
                            },
                            b: {
                                fontSize: 16,
                                fontWeight: 400,
                                fontFamily: 'Arial',
                                lineHeight: 30,
                                color: '#9497B1',
                                align: 'center'
                            }
                        },
                        backgroundColor: '#fff',

                        //   backgroundColor: {
                        //     // width: '150%', 多个线
                        //     // height:'80%',多个线
                        //     // lineHeight: 60,多个线
                        //     // borderRadius: 8,多个线
                        //     // offsetCenter: [0, '-40%'],多个线
                        //     // https://s1.ax1x.com/2022/11/10/z9u9w4.png 多个线
                        //     // https://s1.ax1x.com/2022/11/10/zpbzSf.png
                        //     // ../../assets/img/trend-bg.png
                        //     // image: '../../assets/img/trend-bg.png'
                        //   }
                    },
                    data: [{
                        value: 70,
                    }]
                },
                {
                    type: 'gauge',
                    center: ['50%', '80%'],
                    radius: '71%',
                    startAngle: 180,
                    animation: false,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    itemStyle: {
                        color: '#fff'
                    },
                    progress: {
                        show: true,
                        width: 30
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 98
                    }]
                },
                {
                    type: 'gauge',
                    center: ['50%', '80%'],
                    radius: '60%',
                    startAngle: 180,
                    animation: false,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    itemStyle: {
                        color: '#FFF8EF'
                    },
                    progress: {
                        show: true,
                        width: 2
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 100
                    }]
                }
            ]
        }
    },
    onLoad(options) {},
    onReady() {
        this.getInsuranceRiskInfo()
    },
    onShow() {

    },
    tipInsurance(event) {
        console.log(event)
        console.log(event.currentTarget.top)
        this.setData({
            isTipInsurance: true,
            isTipInsuranceSum: false,
            tipTop: event.currentTarget.offsetTop + 20,
            tipLeft: event.detail.x - 100
        })
    },
    tipInsuranceSum(event){
        console.log(event)
        console.log(event.currentTarget.top)
        this.setData({
            isTipInsuranceSum: true,
            isTipInsurance: false,
            tipTopSum: event.currentTarget.offsetTop + 20,
            tipLeftSum: event.detail.x - 40
        })
    },
    cancelTipInsurance() {
        // console.log('点击啦')
        if (this.data.isTipInsurance) {
            this.setData({
                isTipInsurance: false,
            })
        }
        if (this.data.isTipInsuranceSum) {
            this.setData({
                isTipInsuranceSum: false
            })
        }
    },
    // 风险信息
    async getInsuranceRiskInfo() {
        const result = await getInsuranceRisk({
            coName: user.companyName,
            insureCompanyType:'insure_type_rrb'
        })
        this.setData({
            riskInfo: result,
            'riskInfo.insurRate': (result.insurRate * 100),
            'option.series[0].data[0].value': 100 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140),
            'option.series[1].data[0].value': (98 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140)) == 98 ? 100 : (98 - (100 * (Number(((result.finalMoney / result.totalPrice)*100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))) / 140)),
            'riskInfo.claimRate':Number(((result.finalMoney / result.totalPrice)*100).toFixed(2))
        })
        console.log(this.data.riskInfo, 'riskInfo')
        this.oneComponent = this.selectComponent('#mychart-one');
        await this.getOneOption();
        console.log(this.data.option.series[0].data[0], this.data.option.series[1].data[0], '赋值内容')
    },
    tabClick(val) {
        this.setData({
            activeIndex: val.currentTarget.dataset.index
        })
    },
    getOneOption: function () {
        this.init_one()
    },
    init_one() {
        //初始化第一个图表
        this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            console.log(chart, 'chartchart')
            this.setOption(chart) //赋值给echart图表
            this.chart = chart;
            return chart;
        });
    },
    setOption(chart) {
        chart.setOption(this.data.option);
    }
})